<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SqlToy 自动填充测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        h1, h2 {
            color: #333;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], input[type="number"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
            white-space: pre-wrap;
        }
        .success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .info {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>SqlToy 自动填充 Creator 和 Updater 字段测试</h1>
        <p>这个页面用于测试SqlToy框架中自动填充creator和updater字段的功能。</p>
    </div>

    <div class="container">
        <h2>1. 创建用户（测试creator和updater自动填充）</h2>
        <div class="form-group">
            <label for="userName">用户名:</label>
            <input type="text" id="userName" placeholder="请输入用户名" value="张三">
        </div>
        <div class="form-group">
            <label for="userAge">年龄:</label>
            <input type="number" id="userAge" placeholder="请输入年龄" value="25">
        </div>
        <button onclick="createUser()">创建用户</button>
        <div id="createUserResult" class="result" style="display: none;"></div>
    </div>

    <div class="container">
        <h2>2. 更新用户（测试updater自动更新）</h2>
        <div class="form-group">
            <label for="updateUserId">用户ID:</label>
            <input type="text" id="updateUserId" placeholder="请输入要更新的用户ID">
        </div>
        <div class="form-group">
            <label for="updateUserName">新用户名:</label>
            <input type="text" id="updateUserName" placeholder="请输入新的用户名" value="李四">
        </div>
        <button onclick="updateUser()">更新用户</button>
        <div id="updateUserResult" class="result" style="display: none;"></div>
    </div>

    <div class="container">
        <h2>3. 查询用户</h2>
        <div class="form-group">
            <label for="queryUserId">用户ID:</label>
            <input type="text" id="queryUserId" placeholder="请输入要查询的用户ID">
        </div>
        <button onclick="queryUser()">查询用户</button>
        <div id="queryUserResult" class="result" style="display: none;"></div>
    </div>

    <div class="container">
        <h2>4. 创建订单（测试creator和updater自动填充）</h2>
        <div class="form-group">
            <label for="orderUserId">用户ID:</label>
            <input type="text" id="orderUserId" placeholder="请输入用户ID">
        </div>
        <div class="form-group">
            <label for="orderAmount">订单金额:</label>
            <input type="number" id="orderAmount" step="0.01" placeholder="请输入订单金额" value="99.99">
        </div>
        <button onclick="createOrder()">创建订单</button>
        <div id="createOrderResult" class="result" style="display: none;"></div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8080/api';

        async function createUser() {
            const userName = document.getElementById('userName').value;
            const userAge = document.getElementById('userAge').value;
            
            if (!userName || !userAge) {
                showResult('createUserResult', '请填写完整信息', 'error');
                return;
            }

            try {
                const response = await fetch(`${API_BASE}/user?name=${encodeURIComponent(userName)}&age=${userAge}`, {
                    method: 'POST'
                });
                const result = await response.json();
                
                if (result.success) {
                    const message = `用户创建成功！
用户ID: ${result.data.id}
用户名: ${result.data.name}
年龄: ${result.data.age}
Creator: ${result.creator}
Updater: ${result.updater}
租户ID: ${result.data.tenantId}`;
                    showResult('createUserResult', message, 'success');
                    
                    // 自动填充更新和查询表单的用户ID
                    document.getElementById('updateUserId').value = result.data.id;
                    document.getElementById('queryUserId').value = result.data.id;
                    document.getElementById('orderUserId').value = result.data.id;
                } else {
                    showResult('createUserResult', `创建失败: ${result.message}`, 'error');
                }
            } catch (error) {
                showResult('createUserResult', `请求失败: ${error.message}`, 'error');
            }
        }

        async function updateUser() {
            const userId = document.getElementById('updateUserId').value;
            const userName = document.getElementById('updateUserName').value;
            
            if (!userId || !userName) {
                showResult('updateUserResult', '请填写完整信息', 'error');
                return;
            }

            try {
                const response = await fetch(`${API_BASE}/user/${encodeURIComponent(userId)}?name=${encodeURIComponent(userName)}`, {
                    method: 'PUT'
                });
                const result = await response.json();
                
                if (result.success) {
                    const message = `用户更新成功！
用户ID: ${result.data.id}
用户名: ${result.data.name}
年龄: ${result.data.age}
Creator: ${result.creator} (保持不变)
Updater: ${result.updater} (已更新)
租户ID: ${result.data.tenantId}`;
                    showResult('updateUserResult', message, 'success');
                } else {
                    showResult('updateUserResult', `更新失败: ${result.message}`, 'error');
                }
            } catch (error) {
                showResult('updateUserResult', `请求失败: ${error.message}`, 'error');
            }
        }

        async function queryUser() {
            const userId = document.getElementById('queryUserId').value;
            
            if (!userId) {
                showResult('queryUserResult', '请输入用户ID', 'error');
                return;
            }

            try {
                const response = await fetch(`${API_BASE}/user/${encodeURIComponent(userId)}`);
                const result = await response.json();
                
                if (result.success) {
                    const message = `查询成功！
用户ID: ${result.data.id}
用户名: ${result.data.name}
年龄: ${result.data.age}
Creator: ${result.data.creator}
Updater: ${result.data.updater}
租户ID: ${result.data.tenantId}`;
                    showResult('queryUserResult', message, 'info');
                } else {
                    showResult('queryUserResult', `查询失败: ${result.message}`, 'error');
                }
            } catch (error) {
                showResult('queryUserResult', `请求失败: ${error.message}`, 'error');
            }
        }

        async function createOrder() {
            const userId = document.getElementById('orderUserId').value;
            const amount = document.getElementById('orderAmount').value;
            
            if (!userId || !amount) {
                showResult('createOrderResult', '请填写完整信息', 'error');
                return;
            }

            try {
                const response = await fetch(`${API_BASE}/order?userId=${encodeURIComponent(userId)}&amount=${amount}`, {
                    method: 'POST'
                });
                const result = await response.json();
                
                if (result.success) {
                    const message = `订单创建成功！
订单ID: ${result.data.id}
用户ID: ${result.data.userId}
金额: ${result.data.amount}
Creator: ${result.creator}
Updater: ${result.updater}
创建时间: ${result.data.createTime}
租户ID: ${result.data.tenantId}`;
                    showResult('createOrderResult', message, 'success');
                } else {
                    showResult('createOrderResult', `创建失败: ${result.message}`, 'error');
                }
            } catch (error) {
                showResult('createOrderResult', `请求失败: ${error.message}`, 'error');
            }
        }

        function showResult(elementId, message, type) {
            const element = document.getElementById(elementId);
            element.textContent = message;
            element.className = `result ${type}`;
            element.style.display = 'block';
        }
    </script>
</body>
</html>